<template>
  <div class="detailed-plan">
    <div class="date-time">
        <ElSlider  v-model="currentTime" :min="1" :max="24" :step="1" show-stops 
        show-tooltip 
        :marks="marks" @click="choseTime"/> 
        <!-- <el-slider v-model="currentTime" :min="1" :max="24" :step="2" /> -->
     </div>
    <div class="date-section">
     
      <div class="date-list">
        <div v-for="date in dates" @click="chooseDate(date)" :key="date" class="date-item" :class="{active : date === currentDate }">{{ date }} </div>
        <div class="date-item">
          <ElDatePicker v-model="customTime"
          type="date"
          :clearable="false"
          placeholder="选择日期"
          popper-class="custom-datepicker-popper"
          @change ="changeDate"
          > 
        </ElDatePicker>
        </div>
      </div>
    </div>
    <img src="./img/frame.png" style="width: 100%; height: 100%" />
  </div>
</template>

<script setup lang="ts">
import { onUnmounted, ref, onMounted, computed } from "vue"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import * as mapWork from "./map"
import { useWidget } from "@mars/common/store/widget"
import { ElDatePicker, ElSlider } from "element-plus"
import { parseTime } from "@mars/utils/common"
// 启用map.ts生命周期
useLifecycle(mapWork)
const { disable, currentWidget, disableAll } = useWidget()
const isShow = ref(false)
const dates = ref([])
const customClass = "custom-date-picker-popper"
const currentYear = ref()
const currentDate = ref("1月18日")
const currentTime = ref(2)
const customTime = ref()
const pickerOptions = {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date())
            }
          }, {
            text: "昨天",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit("pick", date)
            }
          }, {
            text: "一周前",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", date)
            }
          }]
        }
const marks = Array.from({ length: 24 }, (_, i) => i + 1)
  .reduce((acc, hour) => ({
    ...acc,
    [hour]: `${hour}点`
  }), {})

function generateRecentDates(days = 7) {
  const result = []
  const now = new Date()
  
  for (let i = days - 1; i >= 0; i--) {
    const date = new Date()
    date.setDate(now.getDate() - i) // 从 days-1 天前到当天
    
    const month = date.getMonth() + 1 // 月份 (0-11 → 1-12)
    const day = date.getDate()
    
    result.push(`${month}月${day}日`)
  }

  currentYear.value = now.getFullYear()
  currentDate.value = now.getMonth() + 1 + "月" + now.getDate() + "日"
  currentTime.value = now.getHours() - 1
  customTime.value = now
  return result
}

// 日期格式化函数
function formatDateWithHour(year: string, month: string, day: string, hour: number | string): string {
  const paddedHour = String(hour).padStart(2, "0")
  return `${year}-${month}-${day} ${paddedHour}:00:00`
}

// 提取中文日期解析函数
function parseChineseDate(chineseDate: string): { month: string; day: string } {
  const [monthStr, dayStr] = chineseDate.split("月")
  const month = monthStr.padStart(2, "0")
  const day = dayStr.replace("日", "").padStart(2, "0")
  return { month, day }
}

const formattedDateTime = computed(() => {
  try {
    if (customTime.value) {
      const [yearStr, monthStr, dayStr] = parseTime(customTime.value, "{y}-{m}-{d}").split("-")
      return formatDateWithHour(yearStr, monthStr, dayStr, currentTime.value)
    } else {
      const { month, day } = parseChineseDate(currentDate.value)
      return formatDateWithHour(currentYear.value, month, day, currentTime.value)
    }
  } catch (error) {
    console.error("日期格式化错误:", error)
    return "" // 或返回默认值
  }
})

function chooseDate(date: string) {
  currentDate.value = date
  const { month, day } = parseChineseDate(date)
  customTime.value = formatDateWithHour(currentYear.value, month, day, "00")
  mapWork.listAndRenderNoiseIncrementally(formattedDateTime.value, false)
  mapWork.addTileLayer(formattedDateTime.value.substring(0, 13).replace(" ", "_"))
}

function choseTime(e: any) {
  mapWork.listAndRenderNoiseIncrementally(formattedDateTime.value, false)
  mapWork.addTileLayer(formattedDateTime.value.substring(0, 13).replace(" ", "_"))
}

function changeDate() {
  if (!customTime.value) { return }
  
  const date = new Date(customTime.value)
  currentDate.value = `${date.getMonth() + 1}月${date.getDate()}日`
  
  mapWork.listAndRenderNoiseIncrementally(formattedDateTime.value)
  mapWork.addTileLayer(formattedDateTime.value.substring(0, 13).replace(" ", "_"))
}
onMounted(async () => {
  disable(["sb-query"])


  dates.value = generateRecentDates()

  mapWork.listAndRenderNoiseIncrementally(formattedDateTime.value)
  mapWork.flyToModel(currentWidget.data.layerId, currentWidget.data.center)
  // mapWork.onLayerLoaded("204013")
  mapWork.addTileLayer(formattedDateTime.value.substring(0, 13).replace(" ", "_"))
  
  mapWork.layerManager.addTileLayer("http://124.71.130.201:40690/stations/wgs84/2025-04-15_13.tif", {
    cropWithGeoJSON: "http://124.71.130.201:40690/stations/map/391fe874067f431fb7262be4d680aa7c.json",
    flyTo: false
  })
})

onUnmounted(() => {
  // 销毁操作
})
</script>
<style lang="less" scoped>
.detailed-plan {
  position: absolute;
  bottom: 10px;
  right: 55px;
  // height: 100%;
  width: 1000px;
}
.date-time{
  width: 100%;
  height: 8px;
  cursor: pointer;

 /* 强制穿透 scoped 样式 */
 ::v-deep .el-slider{
  height: 8px;
 }
  ::v-deep .el-slider__bar {
  background-color: #1281f8 !important;
  height: 8px;
  }
  ::v-deep .el-slider__runway {
    background-color: #f0f0f0 !important;
    height: 8px;
  }

  
  ::v-deep .el-slider__marks-stop {
    width: 8px;
    height: 8px;
    background-color: #409EFF;
    border-radius: 50%;
    
  }

  ::v-deep .el-slider__marks-text {
    // margin-top: 8px;
    // font-size: 12px;
    color: #f0f0f0;
    transform: translateY(-200%);
  }
}
.date-section {
  margin-top: 3px;
  margin-bottom: 15px;
  width: 100%;
}

.date-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}

.date-list {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  background-color: #526b85;
  line-height: 30px;
  .date-item {
    font-size: 16px;
    // margin-bottom: 8px;
    position: relative;
    width: 100%;
    text-align: center;
    border-right: 1px solid #f7eeee;
    cursor: pointer;
    &.active {
      background-color: #559de9;
    }
    ::v-deep .el-input{
      width: 100% !important;
    }
    ::v-deep .el-input__wrapper{
      display: flex;
      width: 100% !important;
      .el-input__inner{
        text-align: center;
      }
    }
  }
}
::v-deep .el-picker-panel__body-wrapper{
  .el-picker-panel__body{
    background-color: #409EFF !important;
  }
    
}


</style>
<style>
.custom-datepicker-popper  {
    /* 全局样式 */
  .custom-datepicker-popper {
    background: #f5f7fa;
    border: 1px solid #e4e7ed;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .el-picker-panel__body-wrapper{
    background-color: #f5f7fa !important;
  }
}
</style>
